<template>
    <div class="childPage">
        <el-page-header @back="goBack" :content="name+'节点'">
        </el-page-header>
        <el-table
                :data="data"
                ref="multipleTable"
                border
                fit
                highlight-current-row
                style="width: 100%;"
                :cell-style="{padding:'3px'}"
        >
            <el-table-column label="节点名称" prop="name" align="center">
                <template slot-scope="scope"><span>{{scope.row.name}}</span></template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="{row}">
                     <el-button type="text" @click="setNode(row)">设置</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            title="节点设置"
            :visible.sync="settingdialogVisible"
            :append-to-body="true"
            width="800px"
            :before-close="handleClose">
                <div>
                    <el-tabs v-model="activeName" @tab-click="handleClick">
                        <el-tab-pane label="常规" name="usu">
                            <div class="checkBoxs tabMinHeight">
                                <h2 class="groupTitle">按钮操作权限</h2>
                                <div class="checkedArea">
                                   <el-checkbox 
                                   class="op-checkbox"
                                    v-for="item in approveBtns" 
                                    :key="item.dictKey+'-dictKey'"
                                    v-model="item.valid">
                                    {{item.dictValue}}
                                    </el-checkbox>
                                </div>
                                
                                <!-- <el-checkbox v-model="checked">退回重填</el-checkbox>
                                <el-checkbox v-model="checked">拒绝</el-checkbox>
                                <el-checkbox v-model="checked">委托</el-checkbox>
                                <el-checkbox v-model="checked">知会</el-checkbox>
                                <el-checkbox v-model="checked">阅示</el-checkbox>
                                <el-checkbox v-model="checked">公开</el-checkbox>
                                <el-checkbox v-model="checked">取回</el-checkbox>
                                <el-checkbox v-model="checked">退回某步</el-checkbox>
                                <el-checkbox v-model="checked">调度</el-checkbox>
                                <el-checkbox v-model="checked">阅批（加签）</el-checkbox>
                                <el-checkbox v-model="checked">撤销</el-checkbox>
                                <el-checkbox v-model="checked">删除</el-checkbox>
                                <el-checkbox v-model="checked">手机上审批</el-checkbox> -->
                            </div>
                            <div  class="footer-btn-group">
                                <el-button @click="settingdialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="submitApproveBtns">确 定</el-button>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="处理人" name="doPoeple">
                            <div class="checkBoxs tabMinHeight">
                                <div class="checkBoxs">
                                    <el-checkbox 
                                    v-for="item in approveOptions" 
                                    :key="item.dictKey+'-dictKey'"
                                    v-model="item.valid">
                                    {{item.dictValue}}
                                    </el-checkbox>
                                </div>
                            </div>
                            <div  class="footer-btn-group">
                                <el-button @click="settingdialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="submitApproveOptionsBtns">确 定</el-button>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="通知" name="message">
                            <div class="mes-wrapper">
                                <div class="mes-catalog">
                                   <ul>
                                     <li 
                                       v-for="(item,index) in mesTabItems" 
                                       @click="mesTabClick(index)" 
                                       :class="{'active':curMesTab == index}" 
                                       :key="item.messageType+'-mesTabItems'"
                                     >
                                       {{item.messageType}}
                                     </li>
                                     <!-- <li class="active">Mail</li>
                                     <li>SMS</li>
                                     <li>MSN</li>
                                     <li>QQ</li>
                                     <li>WebChat</li>
                                     <li>DingTalk</li>
                                     <li>MobilePushNotification</li> -->
                                   </ul>
                                </div>
                                <div class="mes-form">
                                   <div class="mes-form-body">
                                       <el-form ref="form" :model="form" label-width="80px">
                                           <div class="checkBoxs mes-form-checkBoxs" v-if="mesTabItems.length>0">
                                                <el-checkbox v-model="mesTabItems[curMesTab].enableNotice">启用本通知</el-checkbox>
                                                <el-checkbox v-model="mesTabItems[curMesTab].useDefaultMessage">使用缺省消息</el-checkbox>
                                            </div>
                                            <el-form-item label="标题" v-if="mesTabItems.length>0">
                                                <el-input v-model="mesTabItems[curMesTab].templateTitle"></el-input>
                                            </el-form-item>
                                            <el-form-item label="内容" v-if="mesTabItems.length>0">
                                                <el-input type="textarea" :rows="8" v-model="mesTabItems[curMesTab].templateContent"></el-input>
                                            </el-form-item>
                                       </el-form>
                                   </div>
                                </div>
                            </div>
                            <div  class="footer-btn-group">
                                <el-button @click="settingdialogVisible = false">取 消</el-button>
                                <el-button type="primary" @click="submitMessageTemplate">确 定</el-button>
                            </div>
                        </el-tab-pane>
                    </el-tabs>
                </div>
                
        </el-dialog>
    </div>
</template>

<script>
  import {getAction} from '@/api/manage'
  export default {
    data(){
        return {
            name:'',
            id:'',
            data:[],
            settingdialogVisible:false,
            activeName: 'usu',
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
            },
            useMes:true,
            useDefault:true,
            mesTabItems:[],
            approveBtns:[],
            approveOptions:[],
            curMesTab:0,
            curRow:null
        }
    },
    created(){
         this.name = this.$route.query.name
         this.id = this.$route.query.id
         this.getList()
         //this.getMessageOptions()
         //debugger
    },
    methods: {
      goBack() {
         this.$router.go(-1)
      },
      getList(){
            getAction('/api/sdt-flow/flowable/task/userTasks', {
                processDefinitionId:this.id
            }).then(res => {
                const data = res.data.data
                //debugger
                this.data = data;
            })
      },
      setNode(row){
          this.curRow = row
          this.getAllTabsData(row)
      },
      getAllTabsData(row){
            let procDefKey = this.id.split(':')[0]
            getAction('/api/sdt-flow/approvalpermission/get-node-config', {
                procDefKey:procDefKey,
                procNodeId:row.id
            }).then(res => {
                if(res.data.success){
                    // buttonPermissionList: Array(3)
                    //     0: {valid: true, dictKey: "Submit", dictValue: "提交"}
                    //     1: {valid: true, dictKey: "ReturnToInitiator", dictValue: "退回重填"}
                    //     2: {valid: true, dictKey: "Claim", dictValue: "认领"}
                    // messageNoticeConfig: Array(2)
                    //         0: {messageType: "Email", enableNotice: true, templateTitle: "Email模板标题", templateContent: "Email模板内容", useDefaultMessage: true}
                    //         1: {messageType: "Wechat", enableNotice: true, templateTitle: "Wechat模板标题", templateContent: "Wechat模板内容", useDefaultMessage: true}
                    // nodeAutoApproval:
                    //     existsHandledApprove: false
                    //     handlerEqualsIntiator: true
                    //     nextNodeEqualsHandler: true
                   const data = res.data.data
                   if(JSON.stringify(data) == '{}'){
                       this.getApproveItems()
                       this.getApproveOptions()
                       this.getMessageOptions()
                   }else{
                       this.getApproveItems(data.buttonPermissionList)
                       this.getApproveOptions(data.nodeAutoApproval)
                       this.getMessageOptions(data.messageNoticeConfig)
                   }
                   //debugger
                   this.settingdialogVisible = true
                }
                
            })
      },
      //获取常规选择项
      getApproveItems(buttonPermissionList=null){
          let buttonPermissionObj = {};
          if(buttonPermissionList){
              buttonPermissionList.forEach(ele => {
                    buttonPermissionObj[ele.dictKey] = ele.valid
              })
          }
          
          //debugger
          this.getAction("/api/blade-system/dict/dictionary",{code:'approve_btns'}).then(res => {
               //debugger
               let data = res.data.data
               let approveBtns = [];
               data.forEach(item => {
                   if(item.dictKey!='0'){
                       approveBtns.push({
                           dictKey:item.dictKey,
                           dictValue:item.dictValue,
                           valid:buttonPermissionObj[item.dictKey]?buttonPermissionObj[item.dictKey]:false
                       })
                   }
               })
               this.approveBtns = approveBtns
          })
      },
      getApproveOptions(nodeAutoApproval=null){
          let nodeAutoApprovalObj = {};
          if(nodeAutoApproval){
              nodeAutoApprovalObj = nodeAutoApproval
          }
          //debugger
          this.getAction("/api/blade-system/dict/dictionary",{code:'auto_approve_options'}).then(res => {
               //debugger
                // existsHandledApprove: false
                // handlerEqualsIntiator: true
                // nextNodeEqualsHandler: true
                 // "NextNodeEqualsHandler"
               let data = res.data.data
               let approveOptions = [];
               data.forEach(item => {
                   if(item.dictKey!='0'){
                       //debugger
                       approveOptions.push({
                           dictKey:item.dictKey,
                           dictValue:item.dictValue,
                           valid:nodeAutoApprovalObj[item.dictKey]?nodeAutoApprovalObj[item.dictKey]:false
                       })
                   }
               })
               this.approveOptions = approveOptions
          })
      },
      getMessageOptions(messageNoticeConfig=null){
            //   code: "message_options"
            //   dictKey: "Mail"
            //   dictValue: "邮件"

             // messageNoticeConfig: Array(2)
              //0: {messageType: "Email", enableNotice: true, templateTitle: "Email模板标题", templateContent: "Email模板内容", useDefaultMessage: true}
              //1: {messageType: "Wechat", enableNotice: true, templateTitle: "Wechat模板标题", templateContent: "Wechat模板内容", useDefaultMessage: true}
            //debugger
          if(messageNoticeConfig){
              this.mesTabItems = messageNoticeConfig
              return
          }
          //debugger
          this.getAction("/api/blade-system/dict/dictionary",{code:'message_options'}).then(res => {
               //debugger
               let data = res.data.data
               let mesTabItems = [];
               data.forEach(item => {
                   if(item.dictKey!='0'){
                       mesTabItems.push({
                            messageType: item.dictKey,
                            enableNotice: true, 
                            templateTitle: "模板标题", 
                            templateContent: "模板内容", 
                            useDefaultMessage: true
                        })
                   }
               })

               this.mesTabItems = mesTabItems

               console.log(this.mesTabItems,'this.mesTabItems>>>>')
               //debugger
          })
      },
      submitApproveBtns(){
        //   console.log(this.approveBtns,'approveBtns>>')
        //   console.log(this.curRow,'curRow>>>')
          
          let procDefKey = this.id.split(':')[0],
              procDefId = this.id,
              procNodeId = this.curRow.id
          debugger

          
          this.postAction(
              "/api/sdt-flow/approvalpermission/save-button-permission-list",
              {
                  procDefKey,
                  procDefId,
                  procNodeId,
                  buttonPermissionList:this.approveBtns
              }
          ).then(res => {
               if(res.data.success){
                   this.$message.success('操作成功')
               }else{
                   this.$message.error(res.data.msg)
               }
          })
          
      },
      submitApproveOptionsBtns(){
        //   console.log(this.approveBtns,'approveBtns>>')
        //   console.log(this.curRow,'curRow>>>')
          
          let procDefKey = this.id.split(':')[0],
              procDefId = this.id,
              procNodeId = this.curRow.id;
          let subData = {};
          this.approveOptions.forEach(item => {
              subData[item.dictKey] = item.valid
          })
          this.postAction(
              "/api/sdt-flow/approvalpermission/save-node-auto-approval",
              {
                  procDefKey,
                  procDefId,
                  procNodeId,
                  nodeAutoApprove:subData
              }
          ).then(res => {
               if(res.data.success){
                   this.$message.success('操作成功')
               }else{
                   this.$message.error(res.data.msg)
               }
          })
          
      },
      submitMessageTemplate(){
        //   console.log(this.approveBtns,'approveBtns>>')
        //   console.log(this.curRow,'curRow>>>')
          
          let procDefKey = this.id.split(':')[0],
              procDefId = this.id,
              procNodeId = this.curRow.id
          //debugger

          
          this.postAction(
              "/api/sdt-flow/approvalpermission/save-message-notice-config",
              {
                  procDefKey,
                  procDefId,
                  procNodeId,
                  configItems:this.mesTabItems
              }
          ).then(res => {
               if(res.data.success){
                   this.$message.success('操作成功')
               }else{
                   this.$message.error(res.data.msg)
               }
          })
          
      },
      mesTabClick(index){
          this.curMesTab = index
      }
    }
  }
</script>

<style lang="scss">
  .mes-catalog{
      width:180px;
      height:280px;
      border:1px solid #ddd;
      display:inline-block;
      ul{
        
          li{
              list-style:none;
              font-size:14px;
              line-height:28px;
              padding:0 12px;
              cursor:pointer;
              border-bottom:1px solid #ddd;
          }
          li.active{
              background: #409eff;
              color: #ffffff;
          }
      }
  }
  .mes-form{
      vertical-align: top;
      margin-left: 12px;
      width: 500px;
      padding: 20px;
      display:inline-block;
      border:1px solid #dddddd;
      .mes-form-checkBoxs{
          padding-left: 40px;
          margin-bottom: 20px;
      }
  }
  .tabMinHeight{
      min-height:300px;
  }
  .groupTitle{
      font-size: 16px;
      line-height:28px;
  }
  .checkedArea{
      width:400px;
      margin:20px;
  }
  .op-checkbox{
      line-height:32px;
  }
</style>
